<template>
  <div class="list_control">
    <div
      :style="{
        clear: index % 3 === 0 ? 'both' : 'none',
      }"
      v-for="(item, index) in data"
      :key="index"
      class="col-md-4"
      :class="screenWidth > 767 ? 'large' : 'small'"
    >
      <div
        class="es-card back-light"
        :style="
          screenWidth > 767
            ? {
                margin:
                  index % 3 == 1
                    ? '0 .3125rem'
                    : index % 3 === 2
                    ? '0 0 0 .3125rem'
                    : '0 .3125rem 0 0',
              }
            : {}
        "
      >
        <a
          href="javascript:;"
          @click="buttonHandle({})"
          class="img_view position-relative"
        >
          <div
            class="es-img"
            :style="{
              height: 200 / 16 + 'rem',
              overflow: 'hidden',
              'border-top-left-radius': 4 / 16 + 'rem',
              'border-top-right-radius': 4 / 16 + 'rem',
            }"
          >
            <img
              src="https://keenthemes.com/keen/assets/media/demos/demo9/light-ltr.png"
              style="object-fit: cover; object-position: top left"
              class="es-image__img"
            />
            <span class="hover-element position-absolute">
              <i class="es-iconfont icon-zoom-out"></i>
            </span>
          </div>
        </a>
        <div class="es-card-body">
          <h1 class="es-card-title">{{ item.name }}</h1>
          <p class="es-card-text">{{ item.desc }}</p>
          <button
            class="es-button es-round"
            style="margin-top: 0.625rem"
            @click="
              buttonHandle({ path: item.path, params: { ...item.params } })
            "
          >
            Card Link
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ListControl",
  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      screenWidth: 0,
    };
  },
  created() {
    this.screenWidth = screen.width;
    window.addEventListener("resize", this.reloadPage);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.reloadPage);
  },
  methods: {
    reloadPage() {
      this.screenWidth = screen.width;
    },
  },
};
</script>

<style lang="scss">
.list_control {
  padding: 0 0 2rem 0;
  overflow: hidden;
  .large {
    padding: 0.3125rem 0;
    float: left;
    width: 33.33%;
  }
  .small {
    padding: 0;
    margin: 0.625rem 0;
  }
  .es-card {
    border: 0;
    .es-img {
      background-color: var(--dark-light);
    }
    a {
      &.img_view {
        .hover-element {
          visibility: hidden;
          opacity: 0;
          -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
          z-index: 9;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border-top-left-radius: 0.25rem;
          border-top-right-radius: 0.25rem;
        }
        &:hover {
          .hover-element {
            visibility: visible;
            opacity: 1;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            i {
              color: #fff;
              font-size: 2rem;
            }
          }
        }
      }
    }
  }
}
</style>
